<script setup>
import { ref } from "vue";
// 我们的机型顶部区域适配
const { safeAreaInsets } = uni.getSystemInfoSync();

// 轮播图小点
const activeIndex = ref(0);
const onChange = (ev) => {
  // console.log(ev.detail.current);
  activeIndex.value = ev.detail?.current;
};

// 轮播图数据
const swiperDate = ref([
  "../../static/images/core1.webp",
  "../../static/images/core2.webp",
  "../../static/images/core3.webp",
]);

// 分类数据
const categoryList = ref([
  {
    icon: "../../static/images/about.png",
    name: "关于我们",
    path:'about/about'
  },
  {
    icon: "../../static/images/introduce.png",
    name: "农业推荐",
    path:'agriculture/agriculture',
  },
  {
    icon: "../../static/images/disease.png",
    name: "病害诊断",
    path:'disease/disease',
  },
  {
    icon: "../../static/images/care_doctor.png",
    name: "治疗推荐",
    path:'cure/cure',
  },
]);

//  每日推荐数据
const recommendData = ref([
  "../../static/images/recommend1.webp",
  "../../static/images/recommend2.webp",
  "../../static/images/recommend3.webp",
]);


// 商品展示数据
const goodsData = ref([
  {
    id: "3468024",
    name: "玉米专用高增产套餐一喷多防杀虫防病玉米螟钻心虫叶斑锈病农药 一喷六防140g",
    desc: "生活的美，诗人的心\n4.16-4.19号停止发货",
    price: "398.00",
    picture: "../../static/images/pesticide1.jpg",
    orderNum: 253
  },
  {
    id: "1667068",
    name: "天保富玉大瓶玉米除草剂55%硝磺草酮+莠去津玉米地除草烂根剂苗后专用农药 800g*1瓶",
    desc: "澳洲羊皮毛一体，保暖舒适",
    price: "319.00",
    picture: "../../static/images/pesticide2.webp",
    orderNum: 894
  },
  {
    id: "3999485",
    name: "玉米专用高增产套餐一喷多防杀虫防病玉米螟钻心虫叶斑锈病农药 一喷六防140g",
    desc: "强效去污，操作便捷",
    price: "39.00",
    picture: "../../static/images/pesticide6.jpg",
    orderNum: 211
  },
  {
    id: "1512000",
    name: "天保富玉大瓶玉米除草剂55%硝磺草酮+莠去津玉米地除草烂根剂苗后专用农药 800g*1瓶",
    desc: "谱写情谊之歌",
    price: "89.00",
    picture: "../../static/images/pesticide5.jpg",
    orderNum: 224
  }
])


</script>

<template>
  <!-- 头部导航栏开始 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- logo文字 -->
    <view class="logo">
      <!-- <image class="logo-image" src="@/static/images/logo.png"></image> -->
      <text class="logo-text">玉米医生</text>

      <!-- 首页字样 -->
      <view>
        <text class="home">首页</text>
      </view>
    </view>

    <!-- 搜索条 -->
    <view class="search">
      <input type="text" class="icon-search" placeholder="请输入内容" />
      <text class="icon-scan"> </text>
    </view>
  </view>
  <!-- 头部导航栏结束 -->

<!-- ***************************************************************************** -->


  <scroll-view scroll-y class="scroll-view">
    <!-- 轮播图区域开始 -->
    <view class="carousel">
      <swiper
        :circular="true"
        autoplay="true"
        :interval="2000"
        @change="onChange"
      >
        <swiper-item
          class="item"
          v-for="(item, index) in swiperDate"
          :key="index"
        >
          <navigator
            url="/pages/goods/goods"
            hover-class="none"
            class="navigator"
            
          >
            <image mode="aspectFill" class="image" :src="item"></image>
          </navigator>
        </swiper-item>
      </swiper>
      <!-- 指示点 -->
      <view class="indicator">
        <text
          v-for="(item, index) in 3"
          :key="item"
          class="dot"
          :class="{ active: index === activeIndex }"
        ></text>
      </view>
    </view>
    <!-- 轮播图区域结束 -->

<!-- ***************************************************************************** -->


    <!-- 中间分类开始 -->
    <view class="category">
      <navigator
        class="category-item"
        hover-class="none"
        :url="`/pages/${item.path}`"
      
        v-for="item in categoryList"
        :key="item"
      >
        <image class="icon" :src="item.icon"></image>
        <text class="text">{{ item.name }}</text>
      </navigator>
    </view>
    <!-- 中间分类结束 -->

<!-- ***************************************************************************** -->

    <!-- 每日推荐模块开始 -->
    <view class="day_recommend">
      <!--标题 -->
      <text class="recommend_title">每日推荐</text>
      <!-- 图片列表 -->
      <view class="recommend_imgList">
        <view
          class="recommed_item"
          v-for="(item, index) in recommendData"
          :key="index"
        >
          <image :src="item" mode="scaleToFill" />
        </view>
      </view>
    </view>
    <!-- 每日推荐模块结束 -->

<!-- ***************************************************************************** -->

    <!-- 商品展示模块开始 -->
    <view class="caption">
      <text class="text"> 商品展示 </text>
    </view>
    <view class="guess">
      <navigator
        class="guess-item"
        v-for="item in goodsData"
        :key="item.id"
        url="`/pages/goods/goods?`"
      >
        <image
          class="image"
          mode="aspectFill"
          :src="item.picture"
        ></image>
        <view class="name">
          {{ item.name }}
        </view>
        <view class="price">
          <text class="small">¥</text>
          <text>{{ item.price }}</text>
        </view>
      </navigator>
    </view>
    <view class="loading-text"> 正在加载... </view>
    <!-- 商品展示模块结束 -->
  </scroll-view>

<!-- ***************************************************************************** -->
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;

}
.scroll-view {
  position: absolute;
  top: 241rpx;
}
/* 自定义导航条开始 */
.navbar {
  position:fixed !important;
  top: 0 !important;
  z-index: 9999;
  width: 100%;
  background-color: #4dc58e;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  height: 200rpx;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    padding-top: 20rpx;
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      // flex: 1;
      line-height: 28rpx;
      color: #fff;
      font-family: "华文新魏";
      font-size: 50rpx;
    }
    .home {
      margin-left: 115rpx;
      color: #fff;
      font-weight: bold;
    }
  }
  .search {
    position: relative;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search[placeholder] {
    position: relative;
    padding-left: 30rpx;
    font-size: 24rpx;
  }
  .icon-scan {
    position: absolute;
    top: 10rpx;
    left: 15rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: red;
    background: url("../../static//搜索.png") no-repeat;
    background-size: cover;
  }
}
// 自定义导航条结束

// 轮播图样式开始
:host {
  display: block;
  height: 800rpx;
}
/* 轮播图 */
.carousel {
  // width: 300rpx;s
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  background-color: #efefef;

  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
  .navigator,
  .image {
    width: 100%;
    height: 100%;
  }
}
// 轮播图样式结束

/* 前台类目开始 */
.category {
  background-color: #fff;
  margin: 20rpx 0 0;
  padding: 40rpx 0;
  box-shadow: 0rpx 0.5rpx 5rpx rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .category-item {
    width: 150rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .icon {
      width: 100rpx;
      height: 100rpx;
    }
    .text {
      margin-top: 15rpx;
      font-size: 26rpx;
      color: #666;
    }
  }
}
/* 前台类目结束 */

// 每日推荐开始
.day_recommend {
  background-color: #fff;
  padding-bottom: 40rpx;
  padding-top: 5rpx;
  margin-top: 20rpx;
  box-shadow: 0rpx 0.5rpx 5rpx rgba(0, 0, 0, 0.2);
  .recommend_title {
    display: block;
    margin-top: 25rpx;
    margin-left: 40rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .recommend_imgList {
    margin-left: 30rpx;
    display: flex;
    justify-content: space-around;
    .recommed_item {
      width: 220rpx;
      height: 130rpx;
      // background-color: #bfa;
      border-radius: 50rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
  }
}
// 每日推荐结束

/* 商品展示模块开始 */

:host {
  display: block;
}
/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 30rpx 0 20rpx;
  font-size: 32rpx;
  color: #262626;
  &::before,
  &::after {
    content: "";
    width: 20rpx;
    height: 20rpx;
    background-image: url(../../static/images/heard.png);
    background-size: contain;
    margin: 10rpx 10rpx;
  }
}
.guess {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
  .guess-item {
    width: 305rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
  }
  .image {
    width: 304rpx;
    height: 304rpx;
  }
  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .price {
    line-height: 1;
    padding-top: 4rpx;
    color: #cf4444;
    font-size: 26rpx;
  }
  .small {
    font-size: 80%;
  }
}
// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}

// 商品展示模块结束
</style>
